<template>
  <headPage :tabsIndex="1"></headPage>
  <div class="main_box view_box">
    <div class="navigate_view">
      <span class="navigate_text" @click="backTwo">{{
        detailsInfo.freecoursezone_zhuanqumingcheng
      }}</span>
      <span class="navigate_line">/</span>
      <span class="navigate_text" @click="backTwo">{{
        detailsInfo.freeprofessionalmanagement_zhuanyemingcheng
      }}</span>
      <span class="navigate_line">/</span>
      <span class="navigate_text" @click="backTwo">{{
        detailsInfo.freecoursecategories_leimumingcheng
      }}</span>
      <span class="navigate_line">/</span>
      <span class="navigate_text" @click="backOne">详情</span>
      <span class="navigate_line">/</span>
      <span class="navigate_last_text">支付</span>
    </div>
    <div class="pay_status">
      <div class="order_info">
        <div class="order_info_le">
          请尽快付款！ 订单编号：{{ order_sn }}<br />
          付款成功，就可以学习了
        </div>
        <div class="order_info_ri">
          <span>应付金额：</span>
          <span class="order_info_ri_1">￥</span>
          <span class="order_info_ri_2">{{ price }}</span>
        </div>
      </div>
      <div v-if="payStatus == 1" class="result">
        <img class="success_img" src="../../assets/course/8.png" alt="" />
        <div class="success_text">订单支付成功!</div>
        <div class="result_information">
          <div>支付金额：￥ {{ price }}</div>
          <div class="result_information_item">
            支付方式：{{ type_type == "alipay" ? "支付宝" : "微信" }}支付
          </div>
          <div>支付时间：{{ nowTime }}</div>
        </div>
        <div class="result_operation">
          <div class="operation_1" @click="goHome">返回首页</div>
          <div class="operation_2" @click="backOne">开始学习</div>
        </div>
      </div>
    </div>
    <template v-if="payStatus == 0">
      <div class="order_types">
        <div class="types_title">支付方式</div>
        <div class="pay_types">
          <div
            class="types_item"
            v-for="(item, index) in payTypes"
            :key="index"
            @click="selectTypes(index)"
          >
            <div class="item_img">
              <img :src="item.img" alt="" />
              <span>{{ item.name }}</span>
            </div>
            <div class="item_line" v-if="index == typeIndex"></div>
          </div>
        </div>
        <div class="pay_code">
          <template v-if="type_type == 'alipay'">
            <div class="qrcode_1" v-loading="weixinLoading">
              <iframe
                v-if="aliPayHtml"
                :srcdoc="aliPayHtml"
                frameborder="no"
                border="no"
                marginwidth="0"
                marginheight="0"
                scrolling="no"
                width="200"
                height="200"
                style="overflow: hidden"
              ></iframe>
            </div>
          </template>
          <template v-else>
            <div class="qrcode" v-loading="weixinLoading">
              <img :src="qrcodeUrl" alt="" />
            </div>
          </template>

          <!-- <img class="qrcode" src="../../assets/course/6.png" alt=""> -->

          <div class="code_tip">
            <img src="../../assets/course/7.png" alt="" />
            <div>
              打开手机{{ type_type == "alipay" ? "支付宝" : "微信"
              }}<br />扫一扫继续付款
            </div>
          </div>
          <div class="pay_xieyi">
            <img
              @click="selectAgreement"
              v-if="is_talk"
              src="../../assets/default/1.png"
              alt=""
            />
            <img
              @click="selectAgreement"
              v-else
              src="../../assets/default/2.png"
              alt=""
            />
            <span>勾选表示您已仔细阅读并同意</span>
            <span class="xieyi_content" @click="seeAgreement"
              >《付款协议》</span
            >
          </div>
        </div>
      </div>
    </template>
  </div>
  <footerPage></footerPage>

  <viewAgreement ref="agreement" :score="3"></viewAgreement>
</template>

<script name="pay" setup>
import {
  post65eee308f0271,
  post62e342a23919c,
  post65e5af217950c,
  post662790f75b08c,
  post62e335233b477,
} from "@/utils/api.js";
import { ref, reactive, onMounted, inject } from "vue";
import { useRoute, useRouter } from "vue-router";
const router = useRouter();
const route = useRoute();
let aid = ref(route.query.aid);
import headPage from "@/components/headPage.vue";
import footerPage from "@/components/footerPage.vue";
import maskLayer from "@/components/maskLayer.vue";
import zhifubao from "@/assets/course/4.png";
import weixin from "@/assets/course/5.png";
import viewAgreement from "@/components/viewAgreement.vue";
import QRCode from "qrcode";
const injectMessage = inject("$message");
import emitter from "@/utils/mitt.js";

let is_talk = ref(true);
let payStatus = ref(0); // 支付状态
let payTypes = reactive([
  {
    name: "支付宝支付",
    img: zhifubao,
    pay_type: "alipay",
  },
  {
    name: "微信支付",
    img: weixin,
    pay_type: "wxpay",
  },
]);
let type_type = ref("alipay");
let typeIndex = ref(0);
function selectTypes(index) {
  typeIndex.value = index;
  type_type.value = payTypes[index].pay_type;
  weixinLoading.value = true;
  if (typeIndex.value == 1) {
    weixinPay();
  } else {
    zhifubaoPay();
  }
}

const qrCanvas = ref(null);
const content = "这里是你想要生成二维码的内容";
onMounted(() => {
  getCourseDetails();
  if (type_type.value == "alipay") {
    zhifubaoPay();
  } else {
    weixinPay();
  }

  // QRCode.toCanvas(qrCanvas.value, content, error => {
  //   if (error) console.error(error);
  // });
});

// 生成订单号
let order_sn = ref(route.query.order_sn);
let price = ref(route.query.price);

// 支付宝支付  post62e342a23919c
let aliPayHtml = ref("");
function zhifubaoPay() {
  if (aliPayHtml.value) {
    weixinLoading.value = false;
    if (timer.value) {
      clearInterval(timer.value);
      timer.value = null;
    }
    timer.value = setInterval(() => {
      getOrderStatus();
    }, 3000);
    return;
  }
  post62e342a23919c({
    order_config_id: 13,
    order_sn: order_sn.value,
  })
    .then((res) => {
      // console.log(res);
      if (res.code == 1) {
        aliPayHtml.value = res.data.replaceAll(`target='_blank'`, ""); // 去除重定向的参数
        weixinLoading.value = false;
        if (timer.value) {
          clearInterval(timer.value);
          timer.value = null;
        }
        timer.value = setInterval(() => {
          getOrderStatus();
        }, 3000);
      }
    })
    .catch((err) => {
      console.log(err);
    });
}
// 微信支付
let qrcodeUrl = ref("");
let weixinLoading = ref(true);
function weixinPay() {
  if (qrcodeUrl.value) {
    weixinLoading.value = false;
    if (timer.value) {
      clearInterval(timer.value);
      timer.value = null;
    }
    timer.value = setInterval(() => {
      getOrderStatus();
    }, 3000);
    return;
  }
  post62e335233b477({
    order_config_id: 13,
    order_sn: order_sn.value,
    wxpaytype: "Web",
  })
    .then((res) => {
      // console.log(res);
      if (res.code == 1) {
        let qrUrl = res.data;
        QRCode.toDataURL(qrUrl, (err, url) => {
          // console.log(url);
          weixinLoading.value = false;
          if (err) return injectMessage.error("微信支付二维码生成失败，请重试");
          qrcodeUrl.value = url;
          if (timer.value) {
            clearInterval(timer.value);
            timer.value = null;
          }
          timer.value = setInterval(() => {
            getOrderStatus();
          }, 3000);
          // 这里的url就是要显示在真实页面上的二维码了
          // const img = document.querySelector("img");
          // if (img) {
          //   img.src = url;
          // }
        });
      }
    })
    .catch((err) => {
      console.log(err);
    });
}
// 查询订单状态  post662790f75b08c
let timer = ref(null);
function getOrderStatus() {
  post662790f75b08c({
    dingdanhao: order_sn.value,
  })
    .then((res) => {
      // console.log(res);
      if (res.code == 1) {
        if (res.data.status == 1) {
          emitter.emit("paySuccess");
          injectMessage.success("支付成功");
          getNowTime();
          payStatus.value = 1;
          clearInterval(timer.value);
          timer.value = null;
        }
      }
    })
    .catch((err) => {
      console.log(err);
    });
}

let nowTime = ref("");
function getNowTime() {
  let now = new Date();
  let year = now.getFullYear();
  let month = now.getMonth() + 1;
  let day = now.getDate();
  let hour = now.getHours();
  let minute = now.getMinutes();
  let second = now.getSeconds();
  nowTime.value = `${year}-${month}-${day} ${hour}:${minute}`;
}

function selectAgreement() {
  is_talk.value = !is_talk.value;
}
let agreement = ref(null);
function seeAgreement() {
  agreement.value.openPopup();
}

// 课程详情 post65e5af217950c
let detailsInfo = ref({});
function getCourseDetails() {
  post65e5af217950c({
    aid: aid.value,
  })
    .then((res) => {
      if (res.code == 1) {
        detailsInfo.value = res.data;
      }
    })
    .catch((err) => {
      console.log(err);
    });
}
function goHome() {
  if (timer.value) {
    clearInterval(timer.value);
    timer.value = null;
  }
  router.push({
    path: "/",
  });
}
function backOne() {
  if (timer.value) {
    clearInterval(timer.value);
    timer.value = null;
  }
  router.go(-1);
}
function backTwo() {
  if (timer.value) {
    clearInterval(timer.value);
    timer.value = null;
  }
  router.go(-2);
}
</script>

<style lang="scss" scoped>
.view_box {
  margin-top: 97px;
  margin-bottom: 24px;
  .navigate_view {
    display: flex;
    align-items: center;
    padding: 13.5px 0 12px 0;
    .navigate_text {
      font-size: 9px;
      color: #666;
      cursor: pointer;
    }
    .navigate_line {
      font-size: 9px;
      color: #bfbfbf;
      margin: 0 5px;
    }
    .navigate_last_text {
      font-size: 9px;
      color: #1f52ae;
      cursor: pointer;
    }
  }
  .order_info {
    padding: 20px 16px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    .order_info_le {
      font-size: 8px;
      line-height: 14px;
    }
    .order_info_ri {
      display: flex;
      align-items: center;
      font-size: 8px;
      .order_info_ri_1 {
        color: #f43024;
        font-size: 8px;
        font-weight: bold;
      }
      .order_info_ri_2 {
        color: #f43024;
        font-size: 12px;
        font-weight: bold;
        transform: translateY(-1.5px);
      }
    }
  }
  .order_types {
    background: #fff;
    padding: 16px;
    .types_title {
      font-size: 9px;
      font-weight: bold;
    }
    .pay_types {
      margin-top: 20px;
      padding-bottom: 6.5px;
      border-bottom: 1px solid #eee;
      display: flex;
      .types_item {
        margin-right: 28px;
        position: relative;
        cursor: pointer;
        font-size: 9px;
        color: #999;
        .item_img {
          display: flex;
          align-items: center;
          img {
            width: 18px;
            height: 18px;
            margin-right: 4px;
          }
        }
        .item_line {
          width: 70px;
          height: 1.5px;
          background: #1f52ae;
          position: absolute;
          left: 50%;
          bottom: -6px;
          transform: translateX(-50%);
        }
      }
    }
    .pay_code {
      padding: 32px 0 0;
      text-align: center;
      // display: flex;
      // flex-direction: column;
      // justify-content: center;
      .qrcode_1 {
        width: 95px;
        height: 95px;
        margin: 0 auto 16px;
      }
      .qrcode {
        width: 120px;
        height: 120px;
        margin: 0 auto 0;
        img {
          width: 100%;
          height: 100%;
          object-fit: cover;
        }
      }
      .code_tip {
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 7px;
        color: #666666;
        line-height: 10px;
        img {
          width: 15px;
          height: 15px;
          margin-right: 5px;
        }
      }
      .pay_xieyi {
        margin-top: 30px;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 8px;
        color: #999;
        cursor: pointer;
        img {
          width: 9px;
          height: 9px;
          margin-right: 5px;
        }
        .xieyi_content {
          color: #1f52ae;
        }
      }
    }
  }
}
.pay_status {
  background: #fff;
}
.result {
  border-top: 1px solid #eee;
  text-align: center;
  padding: 30px 0 20px;
  .success_img {
    width: 40px;
    height: 40px;
  }
  .success_text {
    font-size: 9px;
    font-weight: 500;
    margin-top: 12px;
  }
  .result_information {
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 8px;
    color: #666;
    margin-top: 12px;
    .result_information_item {
      margin: 0 18px;
    }
  }
  .result_operation {
    display: flex;
    align-items: center;
    justify-content: center;
    margin-top: 23px;
    .operation_1 {
      width: 82px;
      height: 24px;
      background: rgba(255, 255, 255, 0.39);
      border-radius: 3px;
      border: 1px solid #1f52ae;
      color: #1f52ae;
      text-align: center;
      line-height: 24px;
      font-size: 8px;
      cursor: pointer;
    }
    .operation_2 {
      width: 82px;
      height: 24px;
      background: #1f52ae;
      border-radius: 3px;
      border: 1px solid #1f52ae;
      text-align: center;
      line-height: 24px;
      color: #fff;
      font-size: 8px;
      cursor: pointer;
      margin-left: 12px;
    }
  }
}
.agreement_content {
  width: 540px;
  height: 380px;
  background: #fff;
  .agreement_title {
    width: 100%;
    height: 28px;
    background: #1f52ae;
    color: #fff;
    font-size: 9px;
    font-weight: bold;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 12px 0 16px;
    img {
      width: 10px;
      height: 10px;
      cursor: pointer;
    }
  }
  .agreement_view {
    height: 352px;
    padding: 16px;
    font-size: 8px;
    color: #666;
  }
}
</style>